<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>个人资料</title>

		<link href="${basePath!}/static/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="${basePath!}/static/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="${basePath!}/static/css/personal.css" rel="stylesheet" type="text/css">
		<link href="${basePath!}/static/css/infstyle.css" rel="stylesheet" type="text/css">
		<script src="${basePath!}/static/AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
		<script src="${basePath!}/static/AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>
			
	</head>

	<body>
		<!--头 -->
		<header>
			<article>
				<div class="mt-logo">
					<!--顶部导航条 -->
					<div class="am-container header">
						<ul class="message-l">
							<div class="topMessage">
								<div class="menu-hd">
									<#if (userInfo)??>
										欢迎您,<a href="${basePath!}/shopping/personal/center/personalCenter.do" target="_top" class="h" style="color:red;">${userInfo.userName}</a>
									<#else>
										<a href="${basePath!}/login.do" target="_top" class="h">亲，请登录</a>
										<a href="#" target="_top">免费注册</a>
									</#if>
								</div>
							</div>
						</ul>
						<ul class="message-r">
							<div class="topMessage home">
								<div class="menu-hd"><a href="${basePath!}/index.do" target="_top" class="h">商城首页</a></div>
							</div>
							<div class="topMessage my-shangcheng">
								<div class="menu-hd MyShangcheng"><a href="${basePath!}/shopping/personal/center/personalCenter.do" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
							</div>
							<div class="topMessage mini-cart">
								<div class="menu-hd"><a id="mc-menu-hd" href="${basePath!}/shopping/personal/center/personalShopcart.do" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span>(<strong class="h" style="color:red;">${shopcartGoodsCount}</strong>)</a></div>
							</div>
							<div class="topMessage favorite">
								<div class="menu-hd"><a href="${basePath!}/shopping/personal/center/personalCollection.do" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
						</ul>
						</div>

						<!--悬浮搜索框-->

						<div class="nav white">
							<div class="logoBig">
								<li><img src="http://p2s9wr3uo.bkt.clouddn.com/logobig.png" /></li>
							</div>

							<div class="search-bar pr">
								<a name="index_none_header_sysc" href="#"></a>
								<form action="${basePath!}/shopping/search/goods.do" method="get">
									<input id="searchInput" name="goodsName" type="text" placeholder="搜索" autocomplete="off">
									<input id="ai-topsearch" class="submit am-btn"  value="搜索" index="1" type="submit">
								</form>
							</div>
						</div>

						<div class="clear"></div>
					</div>
				</div>
			</article>
		</header>
            <div class="nav-table">
					   <div class="long-title"><span class="all-goods">全部分类</span></div>
					   <div class="nav-cont">
							<ul>
								<li class="index"><a href="${basePath!}/index.do">首页</a></li>
                                <li class="qc"><a href="#">闪购</a></li>
                                <li class="qc"><a href="#">限时抢</a></li>
                                <li class="qc"><a href="#">团购</a></li>
                                <li class="qc last"><a href="#">大包装</a></li>
							</ul>
						</div>
			</div>
			<b class="line"></b>
		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-info">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人资料</strong> / <small>Personal&nbsp;information</small></div>
						</div>
						<hr/>

						<!--头像 -->
						<div class="user-infoPic">
							<div class="filePic">
								<input type="file" id="file" name="file" class="inputPic" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
								<img class="am-circle am-img-thumbnail" src="${userInfo.headPortrait}" alt="" id="headPortrait"/>
							</div>

							<p class="am-form-help">头像</p>

							<div class="info-m">
								<div><b>账号：<i>${userInfo.account}</i></b></div>
								<div class="u-level">
									<span class="rank r2">
							             <s class="vip1"></s><a class="classes" href="#">铜牌会员</a>
						            </span>
								</div>
								<div class="u-safety">
									<a href="safety.html">
									 账户安全
									<span class="u-profile"><i class="bc_ee0000" style="width: 60px;" width="0">60分</i></span>
									</a>
								</div>
								<button onclick="uplodFile()">上传头像</button>
							</div>
							<script>
								function uplodFile(){
									var formData = new FormData();
									formData.append('file', $('input[name=file]')[0].files[0]);
									$.ajax({  
								          url: '${basePath!}/shopping/common/uploadFile.do' ,  
								          type: 'POST',  
								          data: formData,
								          async: false,  
								          cache: false,  
								          contentType: false,  
								          processData: false,  
								          success: function (result) {  
								             if(result.status == 'successful'){
								             	$('#userHeadPortrait').val(result.data);
								             	$('#headPortrait').attr('src', result.data);
								             	alert('上传成功');
								             }else{
								             	console.log(result);  
								             	alert('文件上传失败');
								             }
								          },  
								          error: function (returndata) {  
								              console.log(returndata);  
								              alert('文件上传失败');
								          }  
								     });		
								}
							
								$(function() {
									$("#file").on("change",function(){
										var objUrl = getObjectURL(this.files[0]);
										if (objUrl) {
											$("#headPortrait").attr("src", objUrl);
										}
									});
								});
								
								function getObjectURL(file) {
									var url = null ;
									if (window.createObjectURL!=undefined) { // basic
										url = window.createObjectURL(file) ;
									} else if (window.URL!=undefined) { // mozilla(firefox)
										url = window.URL.createObjectURL(file) ;
									} else if (window.webkitURL!=undefined) { // webkit or chrome
										url = window.webkitURL.createObjectURL(file) ;
									}
									return url ;
								}
							
							</script>
						</div>

						<!--个人信息 -->
						<div class="info-main">
							<form id="updateUserInfoForm" class="am-form am-form-horizontal" action="${basePath!}/shopping/buyer/updateUserInfo.do" method="post">
								<input type="hidden" id="userHeadPortrait" name="headPortrait" value="${userInfo.headPortrait!}"/>
								<h4 style="text-align:center;color:red;font-size:12px;">${errorMsg!}</h4>
								<h4 style="text-align:center;color:green;font-size:12px;">${successfulMsg!}</h4>
								<div class="am-form-group">
									<label for="user-name2" class="am-form-label">账号</label>
									<div class="am-form-content">
										<input type="text" value="${userInfo.account!}">
									</div>
								</div>

								<div class="am-form-group">
									<label for="user-name" class="am-form-label">姓名</label>
									<div class="am-form-content">
										<input type="text" name="userName" value="${userInfo.userName!}">

									</div>
								</div>

								<div class="am-form-group">
									<label for="user-phone" class="am-form-label">电话</label>
									<div class="am-form-content">
										<input id="user-phone" name="phone" value="${userInfo.phone!}" type="tel">

									</div>
								</div>
								<div class="am-form-group">
									<label for="user-email" class="am-form-label">邮件</label>
									<div class="am-form-content">
										<input id="user-email" name="email" value="${userInfo.email!}" type="email">

									</div>
								</div>
							</form>
								<div class="info-btn">
									<div class="am-btn am-btn-danger" onclick="document.getElementById('updateUserInfoForm').submit()">保存修改</div>
								</div>
						</div>

					</div>

				</div>
				<!--底部-->
				${copyrightStatement}
			</div>

			<aside class="menu">
				<ul>
					<li class="person">
						<a href="${basePath!}/shopping/personal/center/personalCenter.do">个人中心</a>
					</li>
					<li class="person">
						<a href="#">个人资料</a>
						<ul>
							<li class="active"> <a href="${basePath!}/shopping/personal/center/personalInfo.do">个人信息</a></li>
							<li> <a href="${basePath!}/shopping/personal/center/personalSafety.do">安全设置</a></li>
							<li> <a href="${basePath!}/shopping/personal/center/personalAddress.do">收货地址</a></li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的交易</a>
						<ul>
							<li><a href="${basePath!}/shopping/personal/center/personalOrder.do">订单管理</a></li>
							<li> <a href="${basePath!}/shopping/personal/center/personalRefund.do">退款售后</a></li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的资产</a>
						<ul>
							<li> <a href="${basePath!}/shopping/personal/center/personalCoupons.do">优惠券 </a></li>
							<li> <a href="${basePath!}/shopping/personal/center/personalBonus.do">红包</a></li>
							<li> <a href="${basePath!}/shopping/personal/center/personalBill.do">账单明细</a></li>
						</ul>
					</li>

					<li class="person">
						<a href="#">我的小窝</a>
						<ul>
							<li> <a href="${basePath!}/shopping/personal/center/personalCollection.do">收藏</a></li>
							<li> <a href="${basePath!}/shopping/personal/center/personalComment.do">评价</a></li>
							<li> <a href="${basePath!}/shopping/personal/center/personalNews.do">消息</a></li>
						</ul>
					</li>

				</ul>

			</aside>
		</div>

	</body>

</html>